<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let obj1 = {
            name: 'jack',
            book: {
                title: 'you don not know JS',
                price: '300$'
            }
        }
        // ======= 什么是浅拷贝 ==========
        // 浅拷贝: 在堆内存中新开辟一个内存空间，创建一个新对象
        //         ==> 拷贝原对象的第一层基本数据类型的值和引用类型的地址。

        // 第一层: 最外面的一层 {}

        // 实现浅拷贝的方式？
        // 1. Object.assign()
        // 2. 扩展运算符
        // 3. 数组的concat()
        // 4. 数组的slice()

        let obj2 = Object.assign({}, obj1)
        // 第一层，属性值如果是基本数据类型，拷贝前后的两个对象的这个属性相互不影响
        obj2.name = 'Java'
        console.log(obj2.name)
        console.log(obj1.name)
        console.log(obj1.name === obj2.name)  // 基本数据类型判断全等  值和类型
        console.log(obj1.book === obj2.book)  // 引用类型，看地址是否一样

        // 第一层，属性值如果是引用类型，引用类型的值改变，会相互影响
        obj1.book.price = 66
        // console.log(obj2)

        // 2.扩展运算符 ...
        const obj3 = { ...obj1 }
        console.log(obj3)
        obj3.name = 'test'
        console.log(obj1.name)

        obj3.book.price = 222
        console.log(obj1.book.price)

        // 3. Array.prototype.concat()
        const arr1 = [1, 2, { user: 'jack' }]
        const arr2 = arr1.concat()
        // console.log(arr2)
        arr1[0] = 666
        console.log(arr1)
        console.log(arr2)
        arr1[2].user = 'Tom'
        console.log(arr1)
        console.log(arr2)

        console.log('---------------')

        // 4. Array.prototype.slice()
        const arr3 = [1, 2, { user: '陈奕迅' }]
        const arr4 = arr3.slice()
        arr4.user = 'Eason'
        console.log(arr3)
        console.log(arr4)
    </script>
</body>

</html>